<template>

	<view class="page">
		<view class="page-ctx">

			<view class="addr-ctx" v-if="addressList.length">
				<view class="box-default">
					<view class="box-item">
						<view class="box-title">
							默认地址
						</view>

						<view class="addr-list">
							<view class="addr-item" v-for="(item,index) in default_list" :key="index" @click="doChooseAddress(item)">
								<view class="addr-inner">
									<view class="addr-left">
										<view class="icon-box">
											<image src="@/static/address/address-home.png"></image>
										</view>

										<view class="info-box">
											<view class="user-info">
												<text class="name">{{item.name}}</text>
												<text class="phone">{{item.phone}}</text>
												<text class="desc">[默认地址]</text>
											</view>

											<view class="address-info">
												{{item.full_addr}}
												<view class="address-detail">
													{{item.address}}
												</view>
											</view>
										</view>
									</view>

									<view class="addr-right flex-center" @click.stop="toEdit(item)">
										<image src="@/static/address/edit.png"></image>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class="box-other">
					<view class="box-item">
						<view class="box-title">
							选择其他地址
						</view>
						<view class="addr-list">
							<view class="addr-item " v-for="(item,index) in other_list" :key="index" @click="doChooseAddress(item)">
								<view class="addr-inner other">
									<view class="addr-left">
										<view class="ico-dai">
											<view class="xing flex-center">
												{{item.xing}}
											</view>
										</view>
										<view class="info-box">
											<view class="moren-user">
												<text>{{item.name}}</text>
												<text>{{item.phone}}</text>
											</view>
											<view class="address-info">
												{{item.full_addr}}
												<view class="">
													{{item.address}}
												</view>
											</view>
										</view>
									</view>
									<view class="addr-right flex-center" @click.stop="toEdit(item)">
										<image src="@/static/address/edit.png"></image>
									</view>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>

			<view class="empty-wrap" v-if="!addressList.length">
				<w_empty emptyText="没有查询到地址信息~"></w_empty>
			</view>

			<w_bottom_safe height="150" />
		</view>

		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<button class="btn flex-center" :disabled="false" @click="toAddressAdd()">
					添加收货地址
				</button>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				store_id: '',
				from: '', //order-订单创建页
				addressList: [],
				default_list: [],
				other_list: [],
				count: 0,
				pagination: {
					page: 1,
					pageNum: 20
				},
			}
		},
		// watch:{
		// 	//显示空白页
		// 	list(e){
		// 		let empty = e.length === 0 ? true: false;
		// 		if(this.empty !== empty){
		// 			this.empty = empty;
		// 		}
		// 	}
		// },

		onLoad(option) {
			console.log(option.source);
			this.source = option.source || 0;

			// this.store_id = option.store_id || '';
			this.from = option.from || '';
		},

		onShow() {
			this.setView()
		},

		methods: {
			setView() {
				this.query_address()
			},
			query_address() {
				this.showLoading()
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'userAddress_lists',
						...this.pagination,
						// shop_id: this.id,
					},
				}).then(res => {
					if (res.code == 200) {
						// this.count = res.data.count;

						let list = res.data;
						list.forEach(v => {
							v.full_addr = [v.country, v.province, v.city, v.area].filter(v => !!v).join('-');
							v.xing = v.name[0] || ''
						})

						this.addressList = list;
						this.default_list = this.addressList.filter(v => v.moren == 1)
						this.other_list = this.addressList.filter(v => v.moren != 1)
					}

					this.hideLoading()
				})
			},

			//选择
			doChooseAddress(item) {
				uni.setStorageSync('order_address', item)

				if (this.from == 'order') {
					this.$store.commit('set_cache_payment_address_id', item.id)
					this.toBack()
				} else if (this.from == 'refund') {
					this.$store.commit('set_cache_refund_address_id', item.id)
					this.toBack()
				} else {
					this.toEdit(item)
				}
			},
			//编辑
			toEdit(item) {
				this.toRoute({
					path: '/address-form',
					query: {
						id: item.id,
					}
				})
			},
			//新增
			toAddressAdd() {
				this.toRoute({
					path: '/address-form',
					query: {}
				})
			},

		}
	}
</script>





<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page {
		padding: 26rpx 32rpx;


		.box-item {
			margin-bottom: 26rpx;

			.box-title {
				font-size: 24rpx;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.addr-item {
				padding: 24rpx 0 0;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}

			.addr-inner {
				margin: 0 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 36rpx;

				.addr-left {
					display: flex;
					align-items: center;
					flex: 1;
					overflow: hidden;
					padding-right: 20rpx;

					.icon-box {
						padding: 24rpx;

						image {
							width: 56rpx;
							height: 56rpx;

						}
					}

					.ico-dai {
						padding: 24rpx;


						.xing {
							width: 56rpx;
							height: 56rpx;
							background: #4D9EFA;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;

							text-align: center;
							border-radius: 50%;
						}
					}

					.user-info {
						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							margin-right: 24rpx;
						}

						.phone {
							font-size: 28rpx;
							color: #333333;
							margin-right: 32rpx;
						}

						.desc {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #27A09A;
						}
					}

					.address-info {
						font-size: 24rpx;
						margin-right: 0;
						margin-top: 12rpx;

						view {
							margin-top: 6rpx;
						}
					}
				}

				.addr-right {
					align-self: stretch;
					width: 72rpx;


					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.other {
			border-bottom: 2rpx solid #F3F4F8;
			padding-bottom: 36rpx;
		}
	}

	.addaddress {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
		padding-top: 8rpx;

		.addaddress_btn {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(131deg, #63E188 0%, #A6E85B 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 0 auto;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}


	.page-foot {
		.btn {
			width: 100%;
			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx;

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>